<template>
  <div  v-if="userBase">
    <!-- -------------用户详情------------------------ -->
            <!-- 基本信息 -->
    <div class="partTitle"><span></span><p>{{$t('userList.userbase')}}</p></div>
    <el-row class="mt20">
        <el-col :span="18">
        <ul class="infotable-3 clearfix">
            <li><span class="label">{{$t('public.no1')}}</span><span class="val">{{userSelf.name}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.userId')}}</span><span class="val">{{userBase.id}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.registerDate')}}</span><span class="val">{{userBase.regTime}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.registerPhone')}}</span><span class="val">{{userBase.phone}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.registerClient')}}</span><span class="val">{{$t($store.getters.clientStatus(userBase.regDevice))}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.registerChannel')}}</span><span class="val">{{userBase.regChannel}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.sex')}}</span><span class="val">{{$t($store.getters.sexStatus(userBase.sex))}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no5')}}</span><span class="val">{{$t($store.getters.education(userSelf.degree))}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no3')}}</span><span class="val">{{$t($store.getters.marriage(userSelf.marriage))}}&nbsp;</span></li>
            <li class="colfull"><span class="label">{{$t('public.approveAddress')}}</span><span class="val">{{userSelf.liveAddress}}&nbsp;</span></li>
        </ul>
        </el-col>
        <el-col :span="6">
        <div class="imgbox">
            <el-image style="height:150px;min-width:150px;padding:0 10px;" :src="userIdcard?userIdcard.facetimePhoto:''" :preview-src-list="userIdcard?[userIdcard.facetimePhoto]:[]">></el-image>
            <p>{{$t('pic.no2')}}</p>
        </div>
        </el-col>
    </el-row>
    <!-- 身份证信息 -->
    <el-row class="mt20">
        <el-col :span="6">
        <ul class="infotable-1 clearfix" style="margin-right:0px;">
            <li><span class="label">{{$t('public.no2')}}</span><span class="val">{{userSelf.idCard}}</span></li>
            <li><span class="label">{{$t('public.no91')}}</span><span class="val">{{userSelf.idCardAwardTime}}</span></li>
            <!-- <li><span class="label">{{$t('public.no92')}}</span><span class="val">??&nbsp;</span></li> -->
        </ul>
        </el-col>
        <el-col :span="12" :offset="1">
        <div class="imgbox mr10">
            <el-image style="width: 180px; height:120px;" :src="userIdcard?userIdcard.idcardPhoto:''" :preview-src-list="userIdcard?[userIdcard.idcardPhoto]:[]">></el-image>
            <p>{{$t('pic.no1')}}</p>
        </div>
        <div class="imgbox">
            <el-image style="width: 180px; height:120px;" :src="userIdcard?userIdcard.idcardPhotoReverse:''" :preview-src-list="userIdcard?[userIdcard.idcardPhotoReverse]:[]">></el-image>
            <p>{{$t('pic.no4')}}</p>
        </div>
        </el-col>
    </el-row>
    <!-- 紧急联系人 -->
    <div class="partTitle mt30"><span></span><p>{{$t('public.no16')}}</p></div>
    <el-row class="mt20">
        <el-col :span="18">
        <ul class="infotable-3">
            <li><span class="label">{{$t('public.no17')}}</span><span class="val">{{userUrgentContact.oneRelation}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.name')}}</span><span class="val">{{userUrgentContact.contactOneName}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no18')}}</span><span class="val">{{userUrgentContact.contactOnePhone}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no17')}}</span><span class="val">{{userUrgentContact.twoRelation}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.name')}}</span><span class="val">{{userUrgentContact.contactTwoName}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no18')}}</span><span class="val">{{userUrgentContact.contactTwoPhone}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no17')}}</span><span class="val">{{userUrgentContact.threeRelation}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.name')}}</span><span class="val">{{userUrgentContact.contactThreeName}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no18')}}</span><span class="val">{{userUrgentContact.contactThreePhone}}&nbsp;</span></li>
        </ul>
        </el-col>
    </el-row>
    <!-- 工作单位信息 -->
    <div class="partTitle mt30"><span></span><p>{{$t('tab.no3')}}</p></div>
    <el-row class="mt20">
        <el-col :span="18">
        <ul class="infotable-3">
            <li><span class="label">{{$t('yuenan.no5')}}</span><span class="val">{{userWork.industryName}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no13')}}</span><span class="val">{{$store.getters.moneySplit(userWork.monthIncome)}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no9')}}</span><span class="val">{{userWork.company}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no10')}}</span><span class="val">{{userWork.entryTime}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no14')}}</span><span class="val">{{userWork.companyAddress}}&nbsp;</span></li>
            <li><span class="label">{{$t('public.no12')}}</span><span class="val">{{userWork.companyPhone}}&nbsp;</span></li>
        </ul>
        </el-col>
    </el-row>
    <!-- 绑卡信息 -->
    <div class="partTitle mt30"><span></span><p>{{$t('userDetail.userbankInfo')}}</p></div>
    <el-table :data="userBank" size="small" stripe class="mt20">
        <el-table-column align="center" prop="accountType" :label="$t('yuenan.no18')" >
        <template slot-scope="scope">
            <span>{{scope.row.accountType==3?'Bank Account':'ATM Card'}}</span>
        </template>  
        </el-table-column>
        <el-table-column align="center" prop="bankName" :label="$t('public.no19')" >
        </el-table-column>
        <el-table-column align="center" prop="bankAccount" :label="$t('public.no20')" >
        </el-table-column>
        <el-table-column align="center" prop="cardFullName" :label="$t('yuenan.no20')" >
        </el-table-column>
        <el-table-column align="center" prop="email" :label="$t('yuenan.no19')" >
        </el-table-column>
        <el-table-column align="center" prop="createTime" :label="$t('public.no21')" >
        </el-table-column>
        <el-table-column align="center" prop="cardYear" :label="$t('yuenan.no21')" >
            <template slot-scope="scope">
            <span>{{scope.row.cardYear}}-{{scope.row.cardMonth}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center"  :label="$t('public.no22')" >
        <template slot-scope="scope">
            <span>{{scope.row.status==1?$t('userDetail.bankId_status.no1'):$t('userDetail.bankId_status.no2')}}</span>
        </template>
        </el-table-column>
    </el-table>
  </div>
  <div v-else class="back">
    <p>{{$t('public.no23')}}，<span @click="back">{{$t('back.no1')}}</span> {{$t('back.no2')}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        partnerId: '',
        userId: this.$route.query.userId, // 上个页面传进来的用户ID
        userBase: {}, // 用户基本信息
        userIdcard: {}, // 身份验证信息
        userSelf: {}, // 个人信息认证
        userWork: {}, // 工作单位信息
        userUrgentContact: {}, // 紧急联系人信息
        userBank: [], // 银行卡信息
        tableData: [] // 历史借款记录
      }
    },
    methods: {
      detail() { // 获取用户详细数据列表
        this.$axios.post(this.$action.user_userDetail+this.userId).then(res => {
            if (res.code == 200) {
                this.userBase = res.data.user;
                this.userIdcard =  res.data.userIdcard?res.data.userIdcard:{};
                this.userSelf = res.data.userSelf?res.data.userSelf:{};
                this.userWork = res.data.userWork?res.data.userWork:{};
                this.userUrgentContact = res.data.userUrgentContact?res.data.userUrgentContact:{};
                this.userBank.push(res.data.userBank);
                this.tableData = res.data.orderList;
            } else {
                this.$globalMsg.error(res.message);
            }
        });
      },
      selLoan(orderNo) { // 借款查询
        this.$router.push({
          path: '/loanmoneydetail?',
          query: {
            orderNo,
            userId: this.userId
          }
        });
      },
      back() { // 页面无数据时，点击返回
        window.history.go(-1);
      },
      moneyFormat(row, column) {
        return row.loanAmount + row.needRefundFee + row.currentInterest + row.overdueInterest
      },
    },
    mounted() {
      this.userId = this.$route.query.userId;
      this.detail();
    }
  }
</script>
<style scoped lang="scss">
.infotable-3{
    margin:0 20px;
    @include infoTable(3,0.4,0.6)
}
.infotable-1{
    margin:0 20px;
    @include infoTable(1,0.4,0.6)
}
.imgbox{
    display: inline-block;
    text-align: center;
}
</style>